<template>
	<view class="page">
		<view class="search-box">
			<u-search placeholder="姓名或手机号" v-model="keyword" shape="square" :clearabled="true" :show-action="true"
				action-text="搜索" :animation="true" :action-style="actionstyle" @custom="custom" @search="custom"> </u-search>
		</view>
		<view class="" style="background-color: #fff;margin-bottom: 5px;">
			<view class="agent_a">
				<view class="agent_ab">
					<view class="photo">
						<image :src="user.imgUrl?user.imgUrl:'/static/img/index/photo.png'"
							style="width:61px;height:61px;border-radius: 50%;"></image>
						<view class="vip_icon">
							<view>
								<image
									:src="user.type=='1'?'/static/img/index/vip_icon.png' : '/static/img/index/ic_member_normal.png'"
									style="width:24rpx;height:22rpx;"></image>
								<text :class="user.type=='1'?'vip_active':''"
									style="padding-left:4rpx;">{{user.type=='1'?profitConfig.levelName:'会员'}}</text>
							</view>
						</view>
					</view>
					<view style="padding:0 40rpx;">
						<view>
							<text class="name">{{user.userName}}</text>
						</view>
						<view style="margin-top: 5px;">(客户经理)</view>
					</view>
				</view>
			
			</view>
			<view hover-class="none" class="agent_ab agent_b" @click="navigatorDataZJ(user,info)">
				<view class="agent_left">
					<view class="agent_h">总交易额(元)</view>
					<view>{{number.parsePrice(info.myTrxAmt)}}</view>
				</view>
				<view class="agent_ab agent_bc">
					<view class="agent_left">
						<view class="agent_h">商户数</view>
						<view>{{info.jihuoNum}}</view>
					</view>
					<view style="position: relative;">
						<view class="agent_h">服务商数</view>
						<view>{{info.userNum}}</view>
						<image src="/static/img/ic_next_double.png" mode="widthFix" style="width: 10px; position: absolute; right: 0; top: 50%;"></image>
					</view>
				</view>
			</view>
		</view>
		<!-- <view class="head">
			<view class="photo">
				<image :src="user.imgUrl" style="width:61px;height:61px;" v-if="user.imgUrl"></image>
				<image src="/static/img/ic_load_fail.png" style="width:61px;height:61px;" mode="" v-else></image>
				<view class="vip_icon">
					<view :class="user.type === '1' ? 'vip' : 'no_vip'">
						<image
							:src="user.type === '1' ? '/static/img/index/vip_icon.png' : '/static/img/index/ic_member_normal.png'"
							style="width: 24rpx; height: 22rpx;"></image>
						<text :class="user.type === '1' ? 'vip_active' : ''"
							style="padding-left: 4rpx;">{{ user.type === '1' ? profitConfig.levelName : '会员' }}</text>
					</view>
				</view>
			</view>
			<view class="user">
				<view>
					<text class="name">{{user.userName}}</text>
				</view>
				<view style="margin-top: 5px;">(客户经理)</view>
			</view>
		</view> -->
	<!-- 	<view class="agent_data">
			<view class="agent_center">
				<view class="agent_list">
					<view>
						<view class="agent_num agent_active">{{number.parsePrice(info.ownTrxAmt)}}</view>
						<view>当月自营累计交易量</view>
					</view>
					<view>
						<view class="agent_num agent_show">{{info.jihuoNum}}</view>
						<view>发展人数</view>
					</view>
				</view>
				<view class="agent_list">
					<view>
						<view class="agent_num agent_active">{{number.parsePrice(info.myTrxAmt)}}</view>
						<view>累计交易额</view>
					</view>
					<view>
						<view class="agent_num agent_show">{{info.userNum}}</view>
						<view>服务商数</view>
					</view>
				</view>
			</view>
		</view> -->
		<view class="redeem-list">
			<view class="redeem-list-list">
				<mescroll-uni :fixed="false" @init="mescrollInit" :height="height" :down="downOption"
					@down="downCallback" :up="upOption" @up="upCallback" @emptyclick="emptyClick">
					<view class="Goos-List">
						<view style="background-color: white; margin-bottom: 5px;" v-for="(item,index) in records" :key="index">
							<view class="agent_a">
								<view class="agent_ab">
									<view class="photo">
										<image :src="item.imgUrl?item.imgUrl:'/static/img/index/photo.png'"
											style="width:61px;height:61px;border-radius: 50%;"></image>
										<view class="vip_icon">
											<view>
												<image
													:src="item.type=='1'?'/static/img/index/vip_icon.png' : '/static/img/index/ic_member_normal.png'"
													style="width:24rpx;height:22rpx;"></image>
												<!-- <text :class="item.type=='1'?'vip_active':''"
													style="padding-left:4rpx;">{{item.type=='1'?item.profitName:'会员'}}</text> -->
													<text :class="item.type=='1'?'vip_active':''"
														style="padding-left:4rpx;">{{item.type=='1'?item.grade:'会员'}}</text>
													
											</view>
										</view>
									</view>
									<view style="padding:0 40rpx;font-size: 34rpx; ">{{item.userName}}</view>
								</view>
								<view class="agent_tel" @click.stop="playCall(item)">
									<image src="/static/img/index/ic_phone_white.png" mode=""></image>
								</view>
							</view>
							<view hover-class="none" class="agent_ab agent_b" @click.stop="navigatorData(item)">
								<view class="agent_left">
									<view class="agent_h">总交易额(元)</view>
									<view>{{item.trxAmt}}</view>
								</view>
								<view class="agent_ab agent_bc">
									<view class="agent_left">
										<view class="agent_h">商户数</view>
										<view>{{item.jihuo}}</view>
									</view>
									<view style="position: relative;">
										<view class="agent_h">服务商数</view>
										<view>{{item.userNum}}</view>
										<image src="/static/img/ic_next_double.png" mode="widthFix" style="width: 10px; position: absolute; right: 0; top: 50%;"></image>
									</view>
								</view>
							</view>
						</view>

					</view>
				</mescroll-uni>
			</view>
		</view>
	</view>
</template>

<script>
	import number from "../../utils/number.js";
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	const api = require('../../config/api');
	const util = require('../../utils/util');
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				number: number, //声明number属性并赋值为引入的number模块
				user: {},
				profitConfig: {},
				info: {},
				downOption: {
					auto: false //  false 不自动加载 (mixin已处理第一个tab触发downCallback) true
				},
				upOption: {
					auto: false, // 不自动加载
					noMoreSize: 4,
					textLoading: '加载中 ...', // 加载中的提示文本
					textNoMore: '暂无更多', // 没有更多数据的提示文本
					empty: {
						tip: '暂无相关数据', // 提示
					},
				},
				records: [],
				actionstyle:{
					width: 'auto'
				},
				keyword:'',

			}
		},
		onLoad() {
			this.getUserInfo();
		},
		onShow() {


		},
		methods: {
			custom(){
				this.downCallback();
			},
			navigateAgent(){
				console.log('触发跳转');
			},
			playCall(item){
				
				// console.log('拨打电话');
				uni.makePhoneCall({
					phoneNumber: item.phone //仅为示例
				});
			},
			navigatorData(item){
				
				uni.setStorageSync('agentInfo',item)
				uni.navigateTo({
					url:'/pages/myAgent/agentData'
				})
			},
			navigatorDataZJ(item,info){
				let items = item
				items.userNum = info.userNum
				uni.setStorageSync('agentInfo',items)
				uni.setStorageSync('agentInfoinfo',info)
				uni.navigateTo({
					url:'/pages/myAgent/agentData'
				})
			},
			async getUserInfo() {
				const res = await util.request(
					api.getUserInfoUrl, {},
					'POST'
				);
				console.log(res);
				if (res.code !== 0) {
					uni.showToast({
						title: res.msg,
						icon: "none"
					})

				} else {
					this.user = res.data.user,
						this.profitConfig = res.data.profitConfig
					// this.gemyAgent()
					this.downCallback();
				}
			},
			async gemyAgent() {
				const res = await util.request(
					api.myAgentUrl, {
						"limit": 10,
						"merName": this.keyword,
						"page": 1
					},
					'POST'
				);
				console.log(res);
				if (res.code !== 0) {
					uni.showToast({
						title: res.msg,
						icon: "none"
					})

				} else {
					this.info = res.data
				}
			},
			/*下拉刷新的回调 */
			downCallback() {
				// 这里加载你想下拉刷新的数据, 比如刷新轮播数据
				// loadSwiper();
				// 下拉刷新的回调,默认重置上拉加载列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
				this.mescroll.resetUpScroll()
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				//联网加载数据
				// this.mescroll.endErr();
				// let keyword = this.tabs[this.i].dictValue
				let pageNum = page.num; // 页码, 默认从1开始
				let pageSize = page.size; // 页长, 默认每页10条
				const res = util.request(
					api.myAgentUrl, {
						page: pageNum,
						merName: this.keyword,
						limit: pageSize,

					},
					'POST'
				).then(res => {
					if (res.code !== 0) {
						uni.showToast({
							title: res.msg,
							icon: "none"
						})
					
					} else {
						this.info = res.data
						
						console.log(res);
						//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
						let totalPage = res.data.page.pages;
						this.mescroll.endByPage(res.data.page.records.length, totalPage); //必传参数(当前页的数据个数, 总页数)
						// this.mescroll.endSuccess(res.data.page.records);
						//设置列表数据
						if (page.num == 1) this.records = []; //如果是第一页需手动制空列表
						// this.records = this.records.concat(res.data.page.records); //追加新数据
						let listArry = [];
						let list = res.data.page.records;
						for (let i = 0; i < list.length; i++) {
							listArry.push(Object.assign(list[i], JSON.parse(list[i].remarks)));
						}
						this.records = this.records.concat(listArry)
					}
					
				}).catch(() => {
					//联网失败, 结束加载
					this.mescroll.endErr();
				})
			},
			emptyClick() {
				uni.showToast({
					title: '点击了按钮,具体逻辑自行实现'
				})
			}


		}
	}
</script>

<style>
	page {
		height: 100%;
		background-color: #F4F5F7;
	}

	.mescroll-upwarp {
		min-height: 0rpx !important;
	}
</style>
<style lang="scss" scoped>
	.page {
		display: flex;
		flex-direction: column;
		height: 100%;
		overflow: hidden;
	}

	/* pages/agent/myAgent/myAgent.wxss */

	.nav {
		background-color: transparent !important;
	}

	.nav_title {
		color: white !important;
	}

	.van-nav-bar__left {
		color: white !important;
		font-size: 36px;
	}

	.van-hairline--bottom:after {
		border-bottom-width: 0 !important;
	}

	.me-weui {
		background-color: white;
		border-bottom: 1px solid #F9F9F9;
	}

	.head {
		display: flex;
		align-items: center;
		padding: 50rpx 0 150rpx 32rpx;
		background-color: #6A9FFB;

	}

	.photo {
		position: relative;
		display: flex;
	}

	.photo image {
		display: block;
		border-radius: 50%;
		overflow: hidden;
	}

	.vip_icon {
		position: absolute;
		left: 0;
		bottom: -4rpx;
		right: 0;
		z-index: 5;
		display: flex;
		justify-content: center;
	}

	.vip_icon>view {
		display: flex;
		justify-content: center;
		align-items: center;
		background: white;
		border-radius: 40rpx;
		font-size: 20rpx;
		color: #969799;
		width: 84rpx;
	}

	.no_vip {
		width: 100rpx !important;
	}

	.vip_active {
		color: #33D719;
	}

	.user {
		padding: 0 40rpx;
		color: white;
	}

	.name {
		font-size: 36rpx;
		font-weight: 600;
	}

	.agent_data {
		position: relative;
		// height: 100px;
		height: 50px;
	}

	.agent_center {
		position: absolute;
		left: 10px;
		right: 10px;
		bottom: 30rpx;
		background-color: white;
		border-radius: 20rpx;
		padding: 0 32rpx;
		box-shadow: 0px 1px 2px 3px rgba(0, 0, 0, 0.05);
	}

	.agent_list {
		display: flex;
		padding: 20rpx;
	}

	.agent_list>view {
		width: 50%;
		text-align: center;
		font-size: 28rpx;
	}

	.agent_list>view:first-child {
		border-right: 1rpx solid #f5f5f5;
	}

	.agent_num {
		padding-bottom: 10rpx;
	}

	.agent_active {
		color: #F2A761;
	}

	.agent_show {
		color: #48D33D;
	}

	.agent_a {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 64rpx 20rpx 32rpx;
		border-bottom: 1rpx solid #f5f5f5;
	}

	.agent_ab {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.agent_tel {
		// background-color: #DA2744;
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		overflow: hidden;
		display: flex;
		justify-content: center;
		align-items: center;
		image{
			width: 100%;
			height: 100%;
		}
	}

	.agent_b {
		padding: 10rpx 32rpx;
		border-bottom: 1rpx solid #f5f5f5;
	}

	.agent_b>view {
		width: 50%;
		text-align: center;
		font-size: 26rpx;
	}

	.agent_left {
		border-right: 1rpx solid #f5f5f5;
	}

	.agent_bc>view {
		width: 50%;
	}

	.agent_h {
		color: #B0B0B0;
	}

	.bottom {
		display: flex;
		justify-content: center;
		padding: 40rpx 0;
	}

	.van-divider {
		border: none !important;

	}

	.redeem-list {
		flex: 1;
		// padding: 10px;
		width: 100%;
		overflow: hidden;
	}

	.redeem-list-list {
		margin-top: 5px;
		/* background-color: antiquewhite; */
		width: 100%;
		height: 100%;
	}
	.search-box{
		background-color: #fff;
		padding: 5px;
	}
</style>